/**
 * 报事待回复列表
 * @author zhangqiang
 * @date   2016/10/09
 */

import NoData from "../components/NoData";
import PullRefresh from "../components/mui/PullRefresh.js";

(function( lf, r) {
    var ajax = lf.utils.ajax,
        RC= r.createClass,
        getUrlParam = lf.utils.getUrlParam,
        doAction = lf.bridgeJs.doAction;

    const TYPE = getUrlParam('type'),
        CONFIRM = 'confirm',
        FEEDBACK = 'feedback',
        CHECK = 'check',
        BACK = 'back';

    var ListGroup = RC({
        getInitialState: function () {
            return ({
                noData: {
                    span_text: '还没有需要您审核的回复',
                    //btn_text: '去报事',
                    //page_url: 'report.html',
                    //page_title: '报事',
                },
            });
        },
        render: function () {
            var setList = this.props.data.map(function (data) {
                return (
                    <List data={data}/>
                )
            })
            if (this.props.data.length) {
                return (
                    <div className="list-group" id="listGroup">
                        {setList}
                    </div>
                )
            } else {
                return <NoData data={this.state.noData}/>
            }

        }
    });
    var List = RC({
        render: function () {
            var data = this.props.data,
                fmt = 'yyyy-MM-dd hh:mm',
                reportTime = lf.utils.format(data.createTime, fmt),
                reviewStatus = this.props.data.reviewStatus;

                return(
                    <a className="list mui-table-view" href="javascript:;" ref="toDetail">
                        <div className="list-title">
                            <span className="name">{data.houseNum} {data.reporterName }</span>
                            <span className="time">{reportTime}</span>
                        </div>
                        <p className="list-text">{data.content}</p>
                     </a>
                )
        },
        componentDidMount: function () {
            if(TYPE == CONFIRM){
                r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {
                    if(this.props.data.orderId==undefined||this.props.data.orderId==''){
                        this.props.data.orderId='';
                    }
                    lf.bridgeJs.doAction('report-explain.html?eventId=' + this.props.data.eventId +'&orderId='+ this.props.data.orderId+'&last='+'fn'+'&type='+'CONFIRM'
                        , '待回复详情');
                }.bind(this));
            } else if(TYPE == CHECK){
                if(this.props.data.orderId==undefined||this.props.data.orderId==''){
                    this.props.data.orderId = '';
                }
                r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {
                    lf.bridgeJs.doAction('report-explain.html?eventId=' + this.props.data.eventId +'&orderId='+this.props.data.orderId+'&reviewStatus='+this.props.data.reviewStatus+'&type='+'CHECK'
                        , '已回复详情');
                }.bind(this));
            } else if(TYPE == FEEDBACK){
                if(this.props.data.orderId==undefined||this.props.data.orderId==''){
                    this.props.data.orderId='';
                }
                r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {
                    lf.bridgeJs.doAction('report-explain.html?eventId=' + this.props.data.eventId +'&orderId='+this.props.data.orderId+'&id='+this.props.data.id+'&last='+'fn'+'&type='+'FEEDBACK'
                        , '待审核详情');
                }.bind(this));
            }
        }
    });

    var Root = r.createClass({
        getInitialState: function () {
            return {
                list: [{
                    reporterName: '',
                    reportTime: '',
                    content: '',
                    houseNum: ''
                }],
                user:''
            }
        },
        getList: function (page, shouldAppend) {

            if (!page) page = 1;

            var me = this,
                typeFn=0;
            me.setState({loadingStatus: 'block'});
            if(TYPE == CONFIRM){
                typeFn = 0;
            } else if(TYPE == CHECK){
                typeFn = 1;
            } else if(TYPE == FEEDBACK){
                typeFn = 2;
            }


            ajax({
                data: {
                    staffId: this.state.user.id,
                    type:typeFn,
                    page: page,
                },
                success: function (data) {
                    if ( data.code == '200' ) {
                        // console.log(data.dataList);

                        let resultList = data.dataList,
                            maxCount = data.maxCount,
                            appendedList;


                        if(shouldAppend){
                            appendedList = me.state.list
                            $.each(resultList, function (i,item) {
                                appendedList.push(item);
                            });

                            mui('#pullrefresh')
                                .pullRefresh()
                                .endPullupToRefresh((appendedList.length == maxCount)); //refresh completed

                            me.setState({
                                list: appendedList,
                                loadingStatus: 'none',
                            });

                        }
                        else {
                            me.setState({
                                list: resultList,
                                loadingStatus: 'none',
                            });
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }
            },'/api/work/event/findEventConsultList');

        },
        componentWillMount: function () {
            var me = this;

            //TODO 在最外层getUser,参考 approval-list
            lf.appJs.getUser(userInfo => {
                me.setState({user:userInfo});
                me.getList();

                lf.appJs.refresh(() => this.getList());

            });

        },
        render: function () {
            return (
                <div className="report-list">
                    <ListGroup data={this.state.list} getList={this.getList}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            var page = nextProps.page;
            this.getList(page, true)
        }
    });

    var PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        pullupFn: function () {
            var newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render: function () {
            var me = this;
            return <PullRefresh pullupFn={me.pullupFn}
                                data={<Root page={me.state.page}/>}/>;
        }
    });
    r.render(
        <PullRefreshCon />,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )
})(liefeng, React)